<template>
    <div class="container">
        <div class="box">
            <h1>朋友</h1>
            <h1>欢迎来到包租婆。</h1>
            <div class="bottom">
                <a href="#" class="btn login fl">登录</a>
                <a href="#" class="btn reg fr">注册</a>
                <div class="clear"></div>
                <router-link to="/index">
                    <a href="javascript:;" class="access fr">直接进入→</a>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import $ from 'jquery'
  export default {
    name:'',
    data () {
      return {

      }
    },
    computed:{

    },
    methods:{

    },
    components: {

    },
    // created、mounted、updated、destroyed
    mounted(){
          $("#app").css('height','100%');  
    }
    
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
#app {
    height: 100%;
}
.container{
    background-image: url("../../public/images/login.png");
    background-size: 100% 100%;
    height: 100%;
}
.container .box{
    width: 100%;
    height: 100%;    
    color: #fff;
    padding: .8rem;
    box-sizing: border-box;
    position: relative;
}
.container .box h1{
    font-size: .72rem;
}
.container .box .bottom{
    height: 1.75rem;
    position: absolute;
    bottom: .8rem;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    padding:0 .8rem;
}
.container .box .bottom .btn{
    width: 2.8rem;
    height: .95rem;
    text-decoration: none;
    text-align: center;
    line-height: 1.1rem;
    color: inherit;
    font-size: .42rem;
    display: block;
}
.container .box .bottom .login{
    background-color: #ff3b3d;
}
.container .box .bottom .reg{
    background-color: #333;
}
.container .box .bottom .access{
    font-size: .28rem;
    color: inherit;
    margin-top: .28rem;
}

 
</style>
